{% extends base %}

{% block head %}

<style type="text/css">
    .option-td {
        width: 25%;
        text-align: left;
    }

    .date-td {
        width: 25%;
        text-align: right;
    }

    .card-row {
        padding-left: 20px;
    }

    .date-box {
        text-align: center;
    }

    .prev-month-link {
        float: left;
        padding-left: 5px;
    }

    .next-month-link {
        float: right;
        padding-right: 5px;
    }

    .content-left {
        float: left;
        width: 300px;
    }

    .content-right {
        padding-left: 10px;
        float: left;
        width: 700px;
    }

    /** 移动端样式放在最后 **/
    @media screen and (max-width: 1000px) {
        /** mobile **/
        .content-left {
            width: 100%;
        }

        .content-right {
            padding-left: 0px;
            width: 100%;
        }
    }
</style>

{% end %}

{% block body %}
    {% from xutils import dateutil %}

    <div class="card">
        <div class="card-title">
            <span>我的笔记</span>
            <div class="float-right">
                <a href="/note/tools" class="btn btn-default">工具</a>
            </div>
        </div>
    </div>
    <div class="content-left">
        {% include note/card/note_date_picker.html %}
        {% include note/card/note_contents_left.html %}
    </div>

    <div class="content-right">
        {% include note/card/plan_detail.html %}
        {% include message/component/message_list.html %}
    </div>

    <script>
    $(function () {
        function formatDate(year, month) {
            if (month == "0") {
                return year;
            }
            if (month < 10) {
                return year + "-0" + month;
            }
            return year + "-" + month;
        }
        $("select").change(function (e) {
            var year = $("[name=year]").val();
            var month = $("[name=month]").val();
            var date = formatDate(year, month);
            location.href = "?date=" + date;
        });


        function getPrevMonth(year, month) {
            if (month > 1) {
                return formatDate(year, month - 1);
            } else {
                return formatDate(year - 1, 12);
            }
        }

        function getNextMonth(year, month) {
            if (month < 12) {
                return formatDate(year, month + 1);
            } else {
                return formatDate(year + 1, 1);
            }
        }

        function getCurrentMonth() {
            var year  = parseInt("{{year}}");
            var month = parseInt("{{month}}");
            return formatDate(year, month);
        }

        function updateMonthLink() {
            var year  = parseInt("{{year}}");
            var month = parseInt("{{month}}");

            var prevMonth = getPrevMonth(year, month);
            var nextMonth = getNextMonth(year, month);

            $(".prev-month-link").attr("href", "?date=" + prevMonth);
            $(".next-month-link").attr("href", "?date=" + nextMonth);
        }


        var date = getCurrentMonth();

        // 刷新记事
        refreshMessageList(date);

        updateMonthLink();
    })
    </script>

{% end %}

{% block aside %}
    {% include note/component/mod_aside.html %}
{% end %}
